import Feature from "ol/Feature";
import Map from "ol/Map";
import type { Extent } from "ol/extent";
import { Fill, Stroke } from "ol/style";
import { RenderMarkerFeatureOptions } from "./marker";

// 地图事件类型
export type MapEventType = "click" | "dblclick";

// 地图事件回调参数
export interface MapEventCallbackEvent {
  map: Map | null; // 地图
  featuresAtPixel: Feature[]; // 事件发生位置元素
  pixel: number[]; // 坐标
  type: string; // 类型
}
// 地图事件回调
export type MapEventCallback = (event: MapEventCallbackEvent) => void;
// 元素事件回调参数
export interface ClusterFeatureEvent extends FeatureEvent {
  clusters: RenderMarkerFeatureOptions[]; // 绑定元素列表
}
// 聚合元素事件回调
export type ClusterFeatureEventCallback = (
  data: Record<string, any>,
  event: ClusterFeatureEvent
) => void;
// 动画配置项
export interface AnimationOptions {
  center?: number[] | undefined; // 视图的中心位置
  zoom?: number | undefined; // 缩放层级
  resolution?: number | undefined; // 分辨率
  rotation?: number | undefined; // 旋转角度
  anchor?: number[] | undefined; // 锚点
  duration?: number | undefined; // 动画持续时长
  easing?: ((arg: number) => number) | undefined; // 过渡方法
}
// 经纬度
export type LngLat =
  | number[]
  | { lng: number; lat: number }
  | { longitude: number; latitude: number };

// 天地图图层类型
export type TDTLayerType = "satellite" | "vector" | "dark-vector";

// 元素事件回调
export type FeatureEventCallback = (
  data: Record<string, any>,
  event: FeatureEvent
) => void;

// 元素事件回调参数
export interface FeatureEvent {
  map: Map | null; // 地图
  feature: Feature; // 元素
  featuresAtPixel: Feature[]; // 事件发生位置元素
  index: number; // 地图元素层级排序
  pixel: number[]; // 坐标
  type: string; // 类型
}

// 适应配置项
export interface FitOptions {
  size?: number[] | undefined; // 需要显示的画面范围
  padding?: number[] | undefined; // 画面编剧，单位为限速，默认为 [0, 0, 0, 0]
  nearest?: boolean | undefined; // 最近的范围，默认为 false
  minResolution?: number | undefined; // 最小分辨率，默认为 0
  maxZoom?: number | undefined; // 最大缩放层级
  duration?: number | undefined; // 动画持续时间
  easing?: ((arg0: number) => number) | undefined; // 过度函数，默认为 inAndOut
  callback?: ((arg: boolean) => void) | undefined; // 到达最终位置后的回调函数
}

// 图片样式
export interface ImageStyle {
  // 标记点图片样式
  anchor?: number[]; // 锚点位置，默认为 [0.5, 0.5]
  anchorOrigin?: "bottom-left" | "bottom-right" | "top-left" | "top-right"; // 锚点参照位置，默认为 top-left
  anchorXUnits?: "fraction" | "pixels"; // x 轴锚点单位，默认为 fraction
  anchorYUnits?: "fraction" | "pixels"; // y 轴锚点单位，默认为 fraction
  color?: number[] | string; // 图标颜色
  crossOrigin?: string | null; // 跨域源
  displacement?: number[]; // 图标的位移，单位为像素，默认为 [0, 0]
  opacity?: number; // 透明度，默认为 1
  width?: number; // 图片宽度，单位为像素，不能和 scale 同时使用
  height?: number; // 图片的高度，单位为像素，不能和 scale 同时使用
  scale?: number | number[]; // 图片缩放大小，默认为 1
  rotateWithView?: boolean; // 是否随视图旋转，默认为 false
  rotation?: number; // 图片旋转角度
  offset?: number[]; // 图片偏移量，默认为 [0, 0]
  offsetOrigin?: "bottom-left" | "bottom-right" | "top-left" | "top-right"; // 便宜参照位置，默认为 top-left
  size?: number[]; // 图片大小，单位为像素
}
// 标记点配置项
export interface MarkerOptions {
  type?: string; // 点位类型
  name?: string; // 点位名称
  position: LngLat; // 点位经纬度
  image?: string; // 点位图片
  imageStyle?: ImageStyle; // 图片样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  extData?: any; // 额外数据
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}

// 文字样式
export interface LabelStyle {
  font?: string; // 字体样式，默认为 10px sans-serif
  maxAngle?: number; // 最大角度，默认为 Math.PI/4
  offsetX?: number; // 横向偏移量，默认为 0
  offsetY?: number; // 纵向偏移量，默认为 0
  overflow?: boolean; // 是否可以溢出，默认为 false
  placement?: "point" | "line"; // 文本定位参照，默认为 point
  repeat?: number; // 复制次数
  scale?: number | number[]; // 缩放级别
  rotateWithView?: boolean; // 是否随视图旋转，默认为 false
  rotation?: number; // 旋转角度
  textAlign?: CanvasTextAlign; // 文本排列方向
  justify?: "center" | "left" | "right"; // 文本在盒中的排列方向
  textBaseline?: CanvasTextBaseline; // 文本基线，默认为 middle
  fill?: Fill | null; // 填充样式
  stroke?: Stroke; // 描边样式
  backgroundFill?: Fill; // 背景填充样式
  backgroundStroke?: Stroke; // 背景描边样式
  padding?: number[]; // 内边距，格式为 [顶部, 右侧, 下方, 左侧]，默认为 [0, 0, 0, 0]
}

// 渲染标记点配置项
export interface RenderMarkersOptions {
  type?: string; // 点位类型
  markers: MarkerOptions | MarkerOptions[]; // 点位或点位集合
  imageStyle?: ImageStyle; // 图片样式
  labelStyle?: LabelStyle; // 文本样式
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}

// 渲染标记点配置项
export interface RenderMarkerLayerOptions {
  type: string; // 图层类型
  markers: MarkerOptions | MarkerOptions[]; // 点位或点位集合
  className?: string; // 自定义 CSS 类名，默认为 ol-layer
  imageStyle?: ImageStyle; // 图片样式
  labelStyle?: LabelStyle; // 文本样式
  opacity?: number; // 透明度，默认为 1
  visible?: boolean; // 是否可见，默认为 true
  extent?: Extent; // 渲染范围
  zIndex?: number; // 层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  background?: string | ((arg: number) => string); // 图层的背景颜色
  properties?: Record<string, any>; // 自定义属性
  clear?: boolean; // 是否清除
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}
// 弹出层配置项
export interface OverlayOptions {
  id?: number | string; // 弹出层主键
  className?: string; // 自定义 CSS 类名，默认为 ol-overlay-container ol-selectable
  element?: HTMLElement; // 弹出层元素
  offset?: number[]; // 偏移量，单位为像素，默认为 [0, 0]
  position?: number[]; // 弹出层位置
  positioning?:
    | "bottom-left"
    | "bottom-center"
    | "bottom-right"
    | "center-left"
    | "center-center"
    | "center-right"
    | "top-left"
    | "top-center"
    | "top-right"; // 弹出位置参考，默认为 top-left
  stopEvent?: boolean; // 是否组织事件冒泡，默认为 true
  insertFirst?: boolean; // 是否在弹出层容器的最前方插入，默认为 true
  autoPan?:
    | {
        margin?: number; // 移动后弹窗与地图边缘的边距
        animation?: {
          duration?: number; // 动画持续时间，单位为毫秒，默认为 1000
          easing?: (arg: number) => number; // 过渡函数，默认为 inAndOut
        };
      }
    | boolean; // 是否自动挪动位置，默认为 false
}
// 填充样式
export interface FillStyle {
  color?: number[] | string | CanvasPattern | CanvasGradient | null; // 填充颜色值
}
// 描边样式
export interface StrokeStyle {
  color?: number[] | string | CanvasPattern | CanvasGradient; // 描边颜色值
  lineCap?: CanvasLineCap; // 线冒，默认为 round
  lineJoin?: CanvasLineJoin; // 线衔接形式，默认为 round
  lineDash?: number[]; // 断线数组
  lineDashOffset?: number; // 断线偏移量，默认为 0
  miterLimit?: number; // 斜接限制，默认为 0
  width?: number; // 描边宽度
}
// 渲染多边形配置
export interface RenderPolygonsOptions {
  type?: string; // 多边形类型
  polygons: PolygonOptions | PolygonOptions[]; // 多边形列表
  fillStyle?: FillStyle; // 填充样式
  strokeStyle?: StrokeStyle; // 描边样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}
// 多边形配置项
export interface PolygonOptions {
  type?: string; // 多边形类型
  name?: string; // 多边形名称
  position: LngLat[][]; // 经纬度列表
  fillStyle?: FillStyle; // 填充样式
  strokeStyle?: StrokeStyle; // 描边样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  extData?: any; // 额外数据
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}
// 渲染多边形图层
export interface RenderPolygonLayerOptions {
  type: string; // 图层类型
  className?: string; // 自定义 CSS 类名，默认为 ol-layer
  polygons: PolygonOptions | PolygonOptions[]; // 多边形或多边形集合
  fillStyle?: FillStyle; // 填充样式
  strokeStyle?: StrokeStyle; // 描边样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  opacity?: number; // 透明度，默认为 1
  visible?: boolean; // 是否可见，默认为 true
  extent?: Extent; // 渲染范围
  zIndex?: number; // 层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  background?: string | ((arg: number) => string); // 图层的背景颜色
  clear?: boolean; // 是否清除
  properties?: Record<string, any>; // 自定义属性
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}

// 折线配置项
export interface PolylineOptions {
  type?: string; // 折线类型
  name?: string; // 折线名称
  position: LngLat[]; // 经纬度列表
  strokeStyle?: StrokeStyle; // 描边样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  extData?: any; // 额外数据
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}
// 渲染折线图层
export interface RenderPolylineLayerOptions {
  type: string; // 图层类型
  className?: string; // 自定义 CSS 类名，默认为 ol-layer
  polylines: PolylineOptions | PolylineOptions[]; // 折线或折线集合
  strokeStyle?: StrokeStyle; // 描边样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  opacity?: number; // 透明度，默认为 1
  visible?: boolean; // 是否可见，默认为 true
  extent?: Extent; // 渲染范围
  zIndex?: number; // 层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  background?: string | ((arg: number) => string); // 图层的背景颜色
  clear?: boolean; // 是否清除
  properties?: Record<string, any>; // 自定义属性
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}
// 渲染折线配置
export interface RenderPolylinesOptions {
  type?: string; // 折线类型
  polylines: PolylineOptions | PolylineOptions[]; // 折线列表
  strokeStyle?: StrokeStyle; // 描边样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}
// 圆形配置项
export interface CircleOptions {
  type?: string; // 圆形类型
  name?: string; // 圆形名称
  center: LngLat; // 中心点经纬度
  radius: number; // 半径，单位为米
  fillStyle?: FillStyle; // 填充样式
  strokeStyle?: StrokeStyle; // 描边样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  extData?: any; // 额外数据
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}
// 渲染圆形配置
export interface RenderCirclesOptions {
  type?: string; // 折线类型
  circles: CircleOptions | CircleOptions[]; // 圆形列表
  fillStyle?: FillStyle; // 填充样式
  strokeStyle?: StrokeStyle; // 描边样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}
// 渲染圆形图层
export interface RenderCircleLayerOptions {
  type: string; // 图层类型
  className?: string; // 自定义 CSS 类名，默认为 ol-layer
  circles: CircleOptions | CircleOptions[]; // 圆形或圆形集合
  fillStyle?: FillStyle; // 填充样式
  strokeStyle?: StrokeStyle; // 描边样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  opacity?: number; // 透明度，默认为 1
  visible?: boolean; // 是否可见，默认为 true
  extent?: Extent; // 渲染范围
  zIndex?: number; // 层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  background?: string | ((arg: number) => string); // 图层的背景颜色
  clear?: boolean; // 是否清除
  properties?: Record<string, any>; // 自定义属性
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}

// 渲染元素配置
export interface RenderFeaturesOptions {
  type?: string; // 折线类型
  markers: MarkerOptions | MarkerOptions[]; // 标记点列表
  polygons: PolygonOptions | PolygonOptions[]; // 多边形列表
  polylines: PolylineOptions | PolylineOptions[]; // 折线列表
  circles: CircleOptions | CircleOptions[]; // 圆形列表
  imageStyle?: ImageStyle; // 图片样式
  fillStyle?: FillStyle; // 填充样式
  strokeStyle?: StrokeStyle; // 描边样式
  labelStyle?: LabelStyle; // 文本样式
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
} // 渲染元素图层
export interface RenderFeatureLayerOptions {
  type: string; // 图层类型
  className?: string; // 自定义 CSS 类名，默认为 ol-layer
  markers: MarkerOptions | MarkerOptions[]; // 标记点列表
  polygons: PolygonOptions | PolygonOptions[]; // 多边形列表
  polylines: PolylineOptions | PolylineOptions[]; // 折线列表
  circles: CircleOptions | CircleOptions[]; // 圆形或圆形集合
  imageStyle?: ImageStyle; // 图片样式
  fillStyle?: FillStyle; // 填充样式
  strokeStyle?: StrokeStyle; // 描边样式
  labelStyle?: LabelStyle; // 文本样式
  opacity?: number; // 透明度，默认为 1
  visible?: boolean; // 是否可见，默认为 true
  extent?: Extent; // 渲染范围
  zIndex?: number; // 层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  background?: string | ((arg: number) => string); // 图层的背景颜色
  clear?: boolean; // 是否清除
  properties?: Record<string, any>; // 自定义属性
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
}
// 渲染热力图图层配置项
export interface RenderHeatmapLayerOptions {
  type: string; // 图层类型
  className?: string; // 自定义图层 CSS 类名，默认为 ol-layer
  opacity?: number; // 图层透明度，默认为 1
  visible?: boolean; // 图层是否可见，默认为 true
  extent?: Extent; // 渲染边界
  zIndex?: number; // 图层层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  gradient?: string[]; // 渐变颜色序列，默认为  ['#00f', '#0ff', '#0f0', '#ff0', '#f00']
  radius?: number; // 计算半径，单位为像素，默认为 8
  blur?: number; // 模糊半径，单位为像素，默认为 15
  properties?: Record<string, any>; // 自定义属性
  max?: number; // 最大值
  data: Array<{
    // 点位数据数组
    position: LngLat; // 位置
    value?: number; // 值
  }>;
}
//  聚合标记点配置项
export interface ClusterMarkerOptions {
  name?: string; // 点位名称
  position: LngLat; // 点位经纬度
  image?: string; // 点位图片
  imageStyle?: ImageStyle; // 图片样式
  label?: string; // 标记点文字
  labelStyle?: LabelStyle; // 文本样式
  extData?: any; // 额外数据
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
}

// 渲染点聚合图层配置项
export interface RenderClusterLayerOptions {
  type: string; // 图层类型
  className?: string; // 自定义 CSS 类名，默认为 ol-layer
  pixel?: number; // 单位像素大小
  distance?: number; // 点聚合距离
  minDistance?: number; // 最小距离
  markers: ClusterMarkerOptions | ClusterMarkerOptions[]; // 点位或点位集合
  renderClusterMarker?: (
    counter: number,
    features: ClusterMarkerOptions[]
  ) => Omit<MarkerOptions, "position">; // 渲染聚合点
  imageStyle?: ImageStyle; // 图片样式
  labelStyle?: LabelStyle; // 文本样式
  opacity?: number; // 透明度，默认为 1
  visible?: boolean; // 是否可见，默认为 true
  extent?: Extent; // 渲染范围
  zIndex?: number; // 层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  background?: string | ((arg: number) => string); // 图层的背景颜色
  clear?: boolean; // 是否清除
  properties?: Record<string, any>; // 自定义属性
  stopClick?: boolean; // 是否停止点击事件冒泡
  stopDBClick?: boolean; // 是否停止双击事件冒泡
  onClick?: FeatureEventCallback; // 元素点击回调
  onDBClick?: FeatureEventCallback; // 元素双击回调
  onMouseEnter?: FeatureEventCallback; // 元素鼠标移入回调
  onMouseLeave?: FeatureEventCallback; // 元素鼠标移出回调
  onClusterClick?: ClusterFeatureEventCallback; // 聚合点点击回调
  onClusterDBClick?: ClusterFeatureEventCallback; // 聚合点双击回调
  onClusterMouseEnter?: ClusterFeatureEventCallback; // 聚合点鼠标移入回调
  onClusterMouseLeave?: ClusterFeatureEventCallback; // 聚合点鼠标移出回调
}
// 渲染图片图层配置项
export interface RenderImageLayerOptions {
  type: string; // 图层类型
  className?: string; // 自定义图层 CSS 类名，默认为 ol-layer
  opacity?: number; // 图层透明度，默认为 1
  visible?: boolean; // 图层是否可见，默认为 true
  extent?: Extent; // 渲染边界
  zIndex?: number; // 图层层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  properties?: Record<string, any>; // 自定义属性
  url: string; // 图片 URL 地址
  coordinates?: LngLat[]; // 用以显示图片的区域来源经纬度集合
  features?: Feature | Feature[]; // 用以显示图片的区域来源元素集合
  query?: {
    // 用以显示图片的区域来源参数
    features?: string[];
    layers?: string[];
  };
  imageExtent?: Extent; // 图片显示范围
}
// 渲染 WMS 瓦片图层配置项
export interface RenderWMSLayerOptions {
  type: string; // 图层类型
  className?: string; // 自定义图层 CSS 类名，默认为 ol-layer
  opacity?: number; // 图层透明度，默认为 1
  visible?: boolean; // 图层是否可见，默认为 true
  extent?: Extent; // 渲染边界
  zIndex?: number; // 图层层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  url: string; // MVT 服务地址
  attributions?: string | string[];
  attributionsCollapsible?: boolean; // 属性是否可折叠，默认为 true
  crossOrigin?: string; // 跨源值
  name: string; // 图层名
  style?: string; // 样式
  headers?: Record<string, string>; // 请求头
  params?: Record<string, string>; // URL 参数
  preload?: number; // 预加载，0 表示不预加载，默认为 0
  properties?: Record<string, any>; // 自定义属性
  cacheSize?: number; // 内部图块缓存大小，默认为 0
}

// 渲染 WMTS 瓦片图层配置项
export interface RenderWMTSLayerOptions {
  type: string; // 图层类型
  className?: string; // 自定义图层 CSS 类名，默认为 ol-layer
  opacity?: number; // 图层透明度，默认为 1
  visible?: boolean; // 图层是否可见，默认为 true
  extent?: Extent; // 渲染边界
  zIndex?: number; // 图层层级
  minResolution?: number; // 最小显示分辨率
  maxResolution?: number; // 最大显示分辨率
  minZoom?: number; // 最小显示缩放层级
  maxZoom?: number; // 最大显示缩放层级
  url: string; // MVT 服务地址
  attributions?: string | string[];
  attributionsCollapsible?: boolean; // 属性是否可折叠，默认为 true
  name: string; // 图层名
  crossOrigin?: string; // 跨源值
  format?: string; // 格式
  style?: string; // 样式
  headers?: Record<string, string>; // 请求头
  // params?: Record<string, string>; // URL 参数
  projection?: string; // 坐标系
  matrixSet: string; // 矩阵集
  preload?: number; // 预加载，0 表示不预加载，默认为 0
  properties?: Record<string, any>; // 自定义属性
  cacheSize?: number; // 内部图块缓存大小，默认为 0
}